AntV G6拓扑图使用

AntV G6 (opens new window) 是国内出的一款拓扑图，国外也有一款cytoscape.js (opens new window)，两者实现功能各有优异。

安装：

npm install --save @antv/g6

使用：

拓扑图如何使用，我们可以针对它进行拆分，我们就可以知道它大概有什么属性和行为了。拓扑图大概有图、布局、节点、边、交互事件、动画这些模块，通过拆分我们再去看文档就对整体有了一个了解，同时也能发现像图表类的插件这样去拆分大概都能猜到其对应的文档结构。

初始化：

<template>
  <div class="graph-container">
    <div class="graph" id="graph"></div>
  </div >
</template>
<script>
/**
 * @desc 威胁事件-查看
 * @author changz
*/
import G6 from '@antv/g6'
import { currencyNameMap } from '@/json/currency.json'
import { eventCenterApi } from '@/api/event-center'
export default {
  name: 'LinkDwawer',
  props: {
    checkData: {
      type: Object
    }
  },
  data() {
    return {
      currencyNameMap,
      loading: false,
      tableData: [],
      graphInstance: null, // 实例
      graphData: null, // 数据
      copyData: null, // 备份数据
      nodeList: [],
      edgeList: []
    }
  },
  created() {
    this.getGraphData()
  },
  methods: {
    initGrapht() {
      const container = document.getElementById('graph')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500

      this.graphInstance = new G6.Graph({
        container: 'graph',
        width,
        height,
        fitView: flag,
        fitCenter: true,
        fitViewPadding: 20,
        modes: {
          default: ['drag-canvas', 'zoom-canvas']
        },
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          align: undefined,
          controlPoints: true,
          nodesepFunc: () => 1,
          ranksepFunc: () => 1
        },
        defaultNode: {
          type: 'levelnode'
        },
        defaultEdge: {
          type: 'smooth'
        }
      })



      // 节点设置
      // this.graphInstance.node((node) => {
      //   return {
      //     type: 'levelnode'
      //     // size: [80, 30],
      //     // label: node.label,
      //     // // 节点样式配置
      //     // style: {
      //     //   fill: '#e8f7ff',
      //     //   lineWidth: 1,
      //     //   stroke: '#329dff',
      //     //   lineDash: true
      //     // },
      //     // // 节点上的标签文本样式配置
      //     // labelCfg: {
      //     //   position: 'center',
      //     //   style: {
      //     //     fontSize: 5,
      //     //     fill: '#444' // 节点标签文字颜色
      //     //   }
      //     // }
      //   }
      // })

      // 边
      // this.graphInstance.edge(() => {
      //   return {
      //     type: 'polyline',
      //     // color: '#0E4278',
      //     label: 'jsklflkasjklf',
      //     style: {
      //       fontSize: 12,
      //       stroke: '#0E4278',
      //       lineWidth: 2
      //     }
      //   }
      // })

      const graphData = {
        nodes: this.nodeList,
        edges: this.edgeList
      }
      this.graphInstance.data(graphData)
      this.graphInstance.render()

      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!this.graphInstance || this.graphInstance.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          this.graphInstance.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    },

    getGraphData() {
      const { source_ip, source_area, destination_ip, destination_area, is_full_chain } = this.checkData
      this.nodeList = [
        {
          id: source_ip,
          label: source_ip,
          subLabel: source_area,
          data: {
            level: 1
          }
        },
        {
          id: destination_ip,
          label: destination_ip,
          subLabel: destination_area,
          data: {
            level: 1
          }
        }
      ]
      this.edgeList = [
        {
          source: source_ip,
          target: destination_ip,
          data: {
            level: 1,
            ...this.checkData
          }
        }
      ]
      this.$nextTick(() => {
        this.initGrapht()
      })
    },

  }
}
</script>
<style scoped lang="less">
.graph-container {
  width: 100%;
  height: 65vh;
  .graph {
    width: 100%;
    height: 100%;
  }
}
</style>

数据结构：

自定义节点、边：

监听事件：